import React, { Component } from "react";
import { Card, Input, Form, Upload, Icon, message } from "antd";
import { connect } from "dva";
import styles from "./WeChat.less";

@connect(stores => ({
  planData: stores.planlist
}))
class AppConfig extends Component {
  state = {
    loading: false
  };

  setUrl = e => {
    const { response } = e.file;
    this.setState({
      url: response && response.datas ? response.datas : ""
    });
  };

  render() {
    const uploadButton = (
      <div className={styles.picStyle}>
        <Icon
          type={this.state.loading ? "loading" : "plus"}
          className={styles.picIconStyle}
        />
        <div className={styles.picStyleText}>上传图标</div>
      </div>
    );
    const { imageUrl } = this.state;
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    };

    return (
      <Card title="渠道配置" style={{ marginTop: 16, marginBottom: 16 }}>
        <Form
          {...formItemLayout}
          style={{ width: 800 }}
          onSubmit={this.handleSubmit}
        >
          <Form.Item label=" APP名称：">
            {getFieldDecorator("appName", {
              rules: [
                {
                  message: "请输入APP名称!"
                },
                {
                  required: true,
                  message: "请输入APP名称!"
                }
              ]
            })(
              <Input
                style={{ width: 466 }}
                maxLength={100}
                placeholder="请输入APP名称"
              />
            )}
          </Form.Item>
          <Form.Item label=" 应用图标：">
            <div className={styles.picIcon}>
              {getFieldDecorator("icon", {
                valuePropName: "fileList",
                getValueFromEvent: this.normFile
              })(
                <Upload
                  name="file"
                  action="/msg/simple/pictureToUrl"
                  listType="picture"
                  onChange={this.setUrl}
                  accept="image/*"
                  beforeUpload={file => {
                    if (file.type.substring(0, 5) !== "image") {
                      message.error("仅支持上传图片");
                      return false;
                    }
                    if (file.size > 5242880) {
                      message.error("请选择小于5MB的图片");
                      return false;
                    }
                    return true;
                  }}
                >
                  {imageUrl ? (
                    <img src={imageUrl} alt="avatar" />
                  ) : (
                    uploadButton
                  )}
                </Upload>
              )}

              <div className={styles.picRightTxt}>
                <span className={styles.picRight}>
                  （只支持JPG、PNG，大小不超过40K）
                </span>
              </div>
            </div>
          </Form.Item>

          <Form.Item label=" PackageName：">
            {getFieldDecorator("packageName", {
              rules: [
                {
                  message: "请输入PackageName!"
                },
                {
                  required: true,
                  message: "请输入PackageName!"
                }
              ]
            })(
              <Input.Password
                style={{ width: 466 }}
                maxLength={100}
                placeholder="请输入PackageName"
              />
            )}
          </Form.Item>
          <Form.Item label=" AppKey：">
            {getFieldDecorator("appkey", {
              rules: [
                {
                  message: "请输入AppKey!"
                },
                {
                  required: true,
                  message: "请输入AppKey!"
                }
              ]
            })(
              <Input.Password
                style={{ width: 466 }}
                maxLength={50}
                placeholder="请输入AppKey"
              />
            )}
          </Form.Item>

          <Form.Item label=" AppSecret：">
            {getFieldDecorator("appSecret", {
              rules: [
                {
                  message: "请输入AppSecret!"
                },
                {
                  required: true,
                  message: "请输入AppSecret!"
                }
              ]
            })(
              <Input.Password
                style={{ width: 466 }}
                maxLength={50}
                placeholder="请输入AppSecret"
              />
            )}
          </Form.Item>
          <Form.Item label=" 华为AppID：">
            {getFieldDecorator("huaweiId", {
              rules: [
                {
                  message: "请输入华为AppID!"
                },
                {
                  message: "请输入华为AppID!"
                }
              ]
            })(
              <Input
                style={{ width: 466 }}
                maxLength={50}
                placeholder="请输入华为AppID"
              />
            )}
          </Form.Item>
          <Form.Item label=" 华为AppSecret：">
            {getFieldDecorator("huaweiAppSecret", {
              rules: [
                {
                  message: "请输入华为AppSecret!"
                },
                {
                  message: "请输入华为AppSecret!"
                }
              ]
            })(
              <Input
                style={{ width: 466 }}
                placeholder="请输入华为AppSecret"
                maxLength={50}
                // value={this.state.managerName}
              />
            )}
          </Form.Item>
          <Form.Item label=" 小米AppSecret：">
            {getFieldDecorator("xiaomiAppSecret", {
              rules: [
                {
                  message: "请输入小米AppSecret!"
                },
                {
                  message: "请输入小米AppSecret!"
                }
              ]
            })(
              <Input
                style={{ width: 466 }}
                maxLength={50}
                placeholder="请输入小米AppSecret"
                // value={this.state.managerName}
              />
            )}
          </Form.Item>
          <Form.Item label=" CFM/FCM服务器密钥：">
            {getFieldDecorator("cfm", {
              rules: [
                {
                  message: "请输入CFM/FCM服务器密钥!"
                },
                {
                  message: "请输入CFM/FCM服务器密钥!"
                }
              ]
            })(
              <Input
                style={{ width: 466 }}
                maxLength={50}
                placeholder="请输入CFM/FCM服务器密钥"
                // value={this.state.managerName}
              />
            )}
          </Form.Item>
        </Form>
      </Card>
    );
  }
}

export default AppConfig;
